<template>
    <div style="text-align: center;margin: 0 20px">
        <!-- 注册表单头部，包含标题和副标题 -->
        <div style="margin-top: 100px">
            <div style="font-size: 25px;font-weight: bold">注册新用户</div>
            <div style="font-size: 14px;color: grey">欢迎注册36k小说网，请填写以下内容</div>
        </div>
        <!-- 注册表单主体，包含用户名、密码、邮箱、验证码输入框及注册按钮 -->
        <div style="margin-top: 50px">
            <el-form :model="form" :rules="rules" @validate="onValidate" ref="formRef">
                <!-- 用户名输入框 -->
                <el-form-item prop="username">
                    <el-input v-model="form.username" :maxlength="10" type="text" placeholder="用户名">
                        <template #prefix>
                            <el-icon>
                                <User/>
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 密码输入框 -->
                <el-form-item prop="password">
                    <el-input v-model="form.password" :maxlength="20" type="password" placeholder="密码">
                        <template #prefix>
                            <el-icon>
                                <Lock/>
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 重复密码输入框 -->
                <el-form-item prop="password_repeat">
                    <el-input v-model="form.password_repeat" :maxlength="20" type="password" placeholder="重复密码">
                        <template #prefix>
                            <el-icon>
                                <Lock/>
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 邮箱输入框 -->
                <el-form-item prop="email">
                    <el-input v-model="form.email" type="email" placeholder="电子邮箱地址">
                        <template #prefix>
                            <el-icon>
                                <Message/>
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 验证码输入框和获取验证码按钮 -->
                <el-form-item prop="code">
                    <el-row :gutter="10" style="width: 100%">
                        <el-col :span="17">
                            <el-input v-model="form.code" :maxlength="6" type="text" placeholder="请输入验证码">
                                <template #prefix>
                                    <el-icon>
                                        <EditPen/>
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-col>
                        <el-col :span="5">
                            <el-button type="success" @click="validateEmail"
                                       :disabled="!isEmailValid || coldTime > 0">
                                {{ coldTime > 0 ? '请稍后 ' + coldTime + ' 秒' : '获取验证码' }}
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </div>
        <!-- 注册按钮 -->
        <div style="margin-top: 80px">
            <el-button style="width: 270px" type="warning" @click="register" plain>立即注册</el-button>
        </div>
        <!-- 已有账号提示和登录链接 -->
        <div style="margin-top: 20px">
            <span style="font-size: 14px;line-height: 15px;color: grey">已有账号? </span>
            <el-link type="primary" style="translate: 0 -2px" @click="router.push('/login')">立即登录</el-link>
        </div>
    </div>
</template>

<script setup>
import {EditPen, Lock, Message, User} from "@element-plus/icons-vue";
import router from "@/router";
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import request from '@/utils/request.js';
// 表单引用，用于获取表单实例，进行表单验证等操作
const formRef = ref()
// 邮箱验证状态，true表示邮箱格式正确
const isEmailValid = ref(false)
// 验证码冷却时间，防止频繁发送验证码
const coldTime = ref(0)
// 表单数据对象，包含用户名、密码、邮箱、验证码等信息
const form = reactive({
    username: '',
    password: '',
    password_repeat: '',
    email: '',
    code: ''
})
// 验证用户名的函数，确保用户名不为空且格式正确
const validateUsername = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入用户名'))
    } else if (!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)) {
        callback(new Error('用户名不能包含特殊字符，只能是中文/英文'))
    } else {
        callback()
    }
}
// 验证密码的函数，确保密码不为空且两次输入的密码一致
const validatePassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== form.password) {
        callback(new Error("两次输入的密码不一致"))
    } else {
        callback()
    }
}
// 表单验证规则，包含用户名、密码、邮箱、验证码的验证规则
const rules = {
    username: [
        {validator: validateUsername, trigger: ['blur', 'change']},
        {min: 2, max: 8, message: '用户名的长度必须在2-8个字符之间', trigger: ['blur', 'change']},
    ],
    password: [
        {required: true, message: '请输入密码', trigger: 'blur'},
        {min: 6, max: 16, message: '密码的长度必须在6-20个字符之间', trigger: ['blur', 'change']}
    ],
    password_repeat: [
        {validator: validatePassword, trigger: ['blur', 'change']},
    ],
    email: [
        {required: true, message: '请输入邮件地址', trigger: 'blur'},
        {type: 'email', message: '请输入合法的电子邮件地址', trigger: ['blur', 'change']}
    ],
    code: [
        {required: true, message: '请输入获取的验证码', trigger: 'blur'},
    ]
}
// 监听表单验证事件，主要用于更新邮箱验证状态
const onValidate = (prop, isValid) => {
    if (prop === 'email')
        isEmailValid.value = isValid
}
// 发送验证码函数，通过GET请求发送验证码到用户邮箱，并启动倒计时
// 发送验证码函数（补充错误处理）
const validateEmail = () => {
    // 防止重复点击（即使按钮禁用，仍做一层校验）
    if (coldTime.value > 0) return;

    coldTime.value = 60; // 开始倒计时
    // 调用获取验证码接口
    request.get(`/api/auth/ask-code`, {
        params: {
            email: form.email,
            type: 'register'
        }
    }).then(response => {
        // 检查响应体中的 code 字段
        if (response.code === 200) {
            // 接口成功响应
            ElMessage.success(`验证码已发送到邮箱: ${form.email}，请注意查收`);
            // 启动倒计时
            const timer = setInterval(() => {
                coldTime.value--;
                if (coldTime.value <= 0) {
                    clearInterval(timer);
                }
            }, 1000);
        } else {
            // 后端返回业务错误（如邮箱已被注册）
            ElMessage.error(response.message || '发送验证码失败，请重试');
            coldTime.value = 0; // 重置倒计时
        }
    }).catch(error => {
        // 网络错误或接口异常
        ElMessage.error('网络错误，验证码发送失败');
        coldTime.value = 0; // 重置倒计时
        console.error('验证码接口异常:', error);
    });
};

// 注册函数（修正post调用并补充错误处理）
const register = () => {
    formRef.value.validate((isValid) => {
        if (isValid) {
            // 调用注册接口
            request.post('/api/auth/register', {
                username: form.username,
                password: form.password,
                email: form.email,
                code: form.code
            }).then(response => {
                // 根据后端实际返回格式处理
                if (response.code === 200) {  // 成功状态码
                    ElMessage.success(response.message || '注册成功，欢迎加入我们');
                    router.push("/login"); // 注册成功后跳转登录
                } else {
                    // 后端返回业务错误（如验证码错误、用户名已存在）
                    ElMessage.error(response.message || '注册失败，请检查信息');
                }
            }).catch(error => {
                // 网络错误或接口异常
                ElMessage.error('网络错误，注册失败，请重试');
                console.error('注册接口异常:', error);
            });
        } else {
            ElMessage.warning('请完整填写注册表单内容！');
        }
    });
};
</script>

<style scoped>

</style>
